<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,user-scalable=0" name="viewport">
    <title>积分记录</title>
    <link href="../../public/plugin/weui/weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/jquery-weui/css/jquery-weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/vant/index.css" rel="stylesheet">
    <link href="../../public/css/iconfont.css?v=20210227" rel="stylesheet">
    <link href="../../public/css/common.css?v=20211224" rel="stylesheet">
</head>

<style type="text/css">
</style>

<body>
<div id="app" v-cloak>
    <!-- 列表 -->
    <van-list
            :finished="finished"
            @load="onLoad"
            finished-text="没有更多了"
            v-model="loading"
    >
        <van-cell :key="item.id"
                  :title="'【'+item.channelName+'】'"
                  :value="(item.operationType === 'increase' ? '+' : '-') + item.operationPoints"
                  center
                  clickable
                  size="large"
                  title-style="flex:2"
                  v-for="item in dataList">
            <div slot="label">
                <span>获得时间：{{item.operationDate}}</span>
            </div>
        </van-cell>
    </van-list>
    <van-empty description="暂无数据" v-show="dataList.length === 0"></van-empty>
    <div @click="WXUtils.goHome()" class="home-btn">
        <img alt="" src="../../public/image/icon/home.svg">
    </div>
</div>
<script src="../../public/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<script src="../../public/plugin/jquery-weui/js/jquery-weui.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vue/vue.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vant/vant.min.js" type="text/javascript"></script>
<script src="../../public/js/common.js?v=2220220" type="text/javascript"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            dataList: [],
            memberInfo: {},
            queryParams: {
                page: 0,
                size: 20,
                sortName: 'id',
                sortOrder: 'desc',
                params: {
                    memberId: ''
                }
            },
            loading: false,
            finished: false
        },
        mounted: function () {
            let self = this;
            self.queryParams.params.memberId = getCookie(COOKIE_MEMBER_ID);
            if (!self.queryParams.params.memberId) {
                MemberUtils.getMemberInfo().then(function (res) {
                    console.log("会员基础信息");
                    console.log(res);
                    if (res && res.code === 200) {
                        setCookie(COOKIE_MEMBER_ID, res.data.id, 30);
                        self.memberInfo = res.data;
                        self.queryParams.params.memberId = res.data.id;
                        self.getPointRecord();
                    }
                })
            } else {
                console.log("cookie读取会员ID")
                self.getPointRecord();
            }
        },
        methods: {
            onLoad: function () {
                console.log('onload');
                let self = this;
                if (self.queryParams.params.memberId) {
                    self.queryParams.page = self.queryParams.page + 1;
                    self.getPointRecord();
                } else {
                    self.loading = false;
                }
            },
            getPointRecord: function () {
                let self = this;
                MemberUtils.getPointRecord(self.queryParams).then(function (res) {
                    console.log('getPointRecord');
                    if (res && res.code === 200) {
                        self.dataList = self.dataList.concat(res.data.records)
                        // 数据全部加载完成
                        if (!res.data.hasNextPage) {
                            self.finished = true;
                        }
                    }
                }).fail(function (err) {
                    console.log(err);
                    self.loading = false;
                })
            }
        }
    })
</script>
</body>
</html>
